<template>
    <div class="flex flex-wrap gap-4 items-center">
        <el-select popper-class="blueBack" @change="changeSelect"  :value-key="keys" :model-value="value||modelValue"
            :placeholder="placeholder"
            :style="{ '--placeholderColor': placeholderColor, '--colorPrimary': colorPrimary, '--backgroundColorPrimary': backgroundColorPrimary, '--fontSize': fontSize, '--pointerEvents': pointerEvents, '--width': width, '--height': height }">
            <el-option v-for="item in Options" :key="item[keys]" :label="item[label]" :value="item" />
        </el-select>
    </div>
</template>

<script setup>
import { ref, watch, toRefs, computed } from 'vue'
const props = defineProps({
    modelValue:{
        type: Object,
        default: {}
    },
    keys: {
        type: String,
        default: 'value'
    },
    label: {
        type: String,
        default: 'label'
    },
    colorPrimary: {
        type: String,
        default: ''
    },
    placeholderColor: {
        type: String,
        default: '#1C1C1C'
    },
    pointerEvents: {
        type: Boolean,
        default: false
    },
    backgroundColorPrimary: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '1.5rem'
    },
    height: {
        type: String,
        default: '0.38rem'
    },
    fontSize: {
        type: String,
        default: '0.14rem'
    },
    options: {
        type: Array,
        default: [],
    },
    placeholder: {
        type: String,
        default: ''
    }

})
const { options } = toRefs(props)
const value = ref('')
const Options = computed(() => {
    return options.value
});
const emit = defineEmits(['childEvent'])
const changeSelect = (e) => {
    value.value = e
    emit('childEvent', [value]);
}
</script>
<style lang="less" scoped>
@--background-color-primary: var(--backgroundColorPrimary);
@--color-primary: var(--colorPrimary);
@--font-size: var(--fontSize);
@--pointer-events: var(--pointerEvents);
@--width: var(--width);
@--height: var(--height);
@--placeholderColor: var(--placeholderColor);

:deep(.el-input__inner) {
    font-size: 0.14rem;
    color: #1C1C1C;
}
:deep(.el-input__suffix-inner) {
    pointer-events: @--pointer-events;
}

:deep(.el-select .el-input__wrapper) {
    color: #1C1C1C;
    background-color: @--background-color-primary;
    width: @--width;
    height: @--height;
}


:deep(.el-input__inner::placeholder) {
    color: @--placeholderColor !important;
    font-size: @--font-size;
    font-weight: 400;
}

:deep(.el-popper__arrow) {
    opacity: 0 !important;
    display: none !important;
}


.blueBack {

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background: #4180F7 !important;
        color: white;
    }
}

.blueBack {
    // width: 240px;
    background-color: @--color-primary;

}
</style>
<style>
.el-popper__arrow {
    opacity: 0 !important;
}
</style>